<template>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>{{$t('statistics.block_height')}}</th>
        <template v-if="coin_type === 'dcr' || coin_type === 'bch' || coin_type === 'bsv' || coin_type === 'zec'">
          <th>{{$t('statistics.create_time')}}</th>
          <th width="300px">{{$t('statistics.hashrate')}}</th>
          <th>{{$t('router.income')}}</th>
        </template>
        <template v-else>
          <th>{{$t('statistics.currency')}}</th>
          <th>{{$t('statistics.create_time')}}</th>
          <th width="300px">{{$t('statistics.hashrate')}}</th>
          <th>{{$t('mill.status')}}</th>
          <th>{{$t('dashboard.income')}}</th>
        </template>
      </tr>
    </thead>
    <tbody>
      <tr v-if="list.length === 0 && !loading">
        <td colspan="7">{{$t('unit.no_data')}}</td>
      </tr>
      <template v-else-if="coin_type === 'dcr' || coin_type === 'bch' || coin_type === 'bsv' || coin_type === 'zec'">
        <tr v-for="(item, index) in list" :key="index">
          <td>{{index+1}}</td>
          <td>{{item.height}}</td>
          <td>{{item.timestamp | momentNoS}}</td>
          <td>
            <el-tooltip placement="top" effect="light">
              <div slot="content">{{item.hash}}</div>
              <span class="text-truncate">{{item.hash}}</span>
            </el-tooltip>
          </td>
          <td>{{item.reward | formatBalance8}}</td>
        </tr>
      </template>
      <template v-else>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{index+1}}</td>
          <td>
            <a class="todetai" target="_blank" :href="hrefUrl(item.height)">{{item.height}}</a>
          </td>
          <td>
            <span :class="'label label-'+(item.variance < 1 ? 'success':'danger')">{{(item.variance*100).toFixed(2)}}%</span>
          </td>
          <td>{{item.timestamp | momentNoS}}</td>
          <td>
            <el-tooltip v-if="item.hash" placement="top" effect="light">
              <div slot="content">{{item.hash}}</div>
              <a target="_blank" :href="hrefUrl(coin_type === 'etp' ? item.height : item.hash)" class="pointer text-truncate">{{item.hash}}</a>
            </el-tooltip>
            <span v-else>-</span>
          </td>
          <td>{{status[item.status]}}</td>
          <td>{{item.formatReward}} {{coin_type_up}}</td>
        </tr>
      </template>
    </tbody>
  </table>
</template>
<script>
import { InPoolBlocks } from '@/api';

export default {
  props: {
    coin_type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      list: [],
      timer: undefined,
      status: {
        candidates: this.$t('statistics.new'),
        immature: this.$t('statistics.immature'),
        matured: this.$t('statistics.mature'),
        orphan: this.$t('statistics.solitary'),
      },
    };
  },
  computed: {
    coin_type_up() {
      return this.coin_type.toUpperCase();
    },
  },
  created() {
    this.getInPoolBlocks();
    this.timer = window.setInterval(() => {
      this.getInPoolBlocks();
    }, 15000);
  },
  beforeDestroy() {
    window.clearInterval(this.timer);
  },
  methods: {
    hrefUrl(k) {
      if (this.coin_type === 'eth') {
        return `https://etherscan.io/block/${k}`;
      }
      return `https://explorer.mvs.org/#!/blk/${k}`;
    },
    resolveBlock(list, status) {
      if (!list || !Array.isArray(list)) {
        return [];
      }
      return list.map((item) => {
        const v = JSON.parse(JSON.stringify(item));
        v.status = status;
        v.variance = v.shares / v.difficulty;
        v.isLucky = v.variance <= 1.0;
        if (status === 'matured' && !parseInt(v.reward, 10)) {
          v.formatReward = 0;
          v.status = 'orphan';
        } else {
          v.formatReward = this.coin_type === 'eth' ? (parseInt(v.reward, 10) / (10 ** 18)).toFixed(5) : (parseInt(v.reward, 10) / (10 ** 8)).toFixed(6);
        }
        if (v.hash === '0x0') {
          v.hash = '';
        }
        return v;
      });
    },
    getInPoolBlocks() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      InPoolBlocks({ coin_type: this.coin_type })
        .then((res) => {
          if (res.data.status === 1) {
            const data = res.data.data;
            this.list = this.resolveBlock(data.candidates, 'candidates').concat(this.resolveBlock(data.immature, 'immature')).concat(this.resolveBlock(data.matured, 'matured'));
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
